<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- ! 绘制头部区域 -->
        <tree-tools
          :tree-data="company"
          :is-root="true"
          @openDialog="openDialog"
        ></tree-tools>
        <!-- ! 树形组件区域 -->
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <!-- 再次复用头部组件 -->
          <tree-tools
            slot-scope="{ data }"
            :tree-data="data"
            @updateList="initData"
            @openDialog="openDialog"
            @editDialog="editDialog"
          ></tree-tools>
        </el-tree>
      </el-card>
    </div>

    <!-- 新增修改弹框 -->
    <add-dpet ref="addDept" @updateList="initData" />
  </div>
</template>

<script>
import treeTools from "./components/tree-tools.vue";
import addDpet from "./components/add-dept.vue";
import { getDepartmentListApi } from "@/api/departments";
import { tranListToTreeData } from "@/utils";
export default {
  components: { treeTools, addDpet },
  name: "Departments",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      company: {
        name: "江苏传智播客教育科技有限公司",
        manager: "负责人",
        id: "",
      },
      data: [], //定义变量,存储数据
      dialogShow: false, // 控制弹框显示与隐藏
    };
  },
  created() {
    //在声明周期里获取数据
    this.initData();
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data);
    },
    // 获取数据
    async initData() {
      let { companyName, depts } = await getDepartmentListApi();
      this.company.name = companyName;
      this.data = tranListToTreeData(depts, "");
    },
    //新增
    openDialog(val) {
      this.$refs.addDept.dialogShow = true;
      this.$refs.addDept.formData.pid = val;
    },
    // 编辑
    editDialog(val) {
      this.$refs.addDept.getFormDataInfo(val);
    },
  },
};
</script>

<style></style>
